<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息详情 - 企业官网后台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .message-detail-card {
            border-left: 4px solid #007bff;
            margin-bottom: 2rem;
        }
        .message-detail-card.status-pending { border-left-color: #ffc107; }
        .message-detail-card.status-read { border-left-color: #17a2b8; }
        .message-detail-card.status-replied { border-left-color: #28a745; }
        .admin-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }
        .message-content {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1.5rem;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="admin-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col">
                    <h1><i class="bi bi-envelope-open"></i> 消息详情</h1>
                    <p class="mb-0">查看和管理联系消息</p>
                </div>
                <div class="col-auto">
                    <a href="/admin/messages" class="btn btn-light">
                        <i class="bi bi-arrow-left"></i> 返回列表
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <!-- 消息详情卡片 -->
                <div class="card message-detail-card status-${message.status.name().toLowerCase()}" th:classappend="'status-' + ${message.status.name().toLowerCase()}">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="bi bi-person"></i> 
                                <span th:text="${message.name}">姓名</span>
                                <span class="badge bg-secondary ms-2" th:text="${message.status.name()}">状态</span>
                            </h5>
                            <small class="text-muted" th:text="${#temporals.format(message.createdAt, 'yyyy-MM-dd HH:mm:ss')}">时间</small>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- 联系信息 -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <h6><i class="bi bi-envelope"></i> 邮箱地址</h6>
                                <p class="text-muted" th:text="${message.email}">邮箱</p>
                            </div>
                            <div class="col-md-6" th:if="${message.phone != null and !message.phone.isEmpty()}">
                                <h6><i class="bi bi-phone"></i> 联系电话</h6>
                                <p class="text-muted" th:text="${message.phone}">电话</p>
                            </div>
                        </div>

                        <!-- 消息内容 -->
                        <div class="mb-3">
                            <h6><i class="bi bi-chat-text"></i> 消息内容</h6>
                            <div class="message-content" th:text="${message.message}">消息内容</div>
                        </div>

                        <!-- 技术信息 -->
                        <div class="row">
                            <div class="col-md-6">
                                <h6><i class="bi bi-geo-alt"></i> IP地址</h6>
                                <p class="text-muted" th:text="${message.ipAddress}">IP地址</p>
                            </div>
                            <div class="col-md-6">
                                <h6><i class="bi bi-fingerprint"></i> 设备指纹</h6>
                                <p class="text-muted">
                                    <code th:text="${message.deviceFingerprint}">设备指纹</code>
                                </p>
                            </div>
                        </div>

                        <!-- 用户代理 -->
                        <div class="mb-3" th:if="${message.userAgent != null}">
                            <h6><i class="bi bi-browser"></i> 浏览器信息</h6>
                            <p class="text-muted small" th:text="${message.userAgent}">用户代理</p>
                        </div>

                        <!-- 管理员备注 -->
                        <div class="mb-3" th:if="${message.adminNotes != null and !message.adminNotes.isEmpty()}">
                            <h6><i class="bi bi-sticky"></i> 管理员备注</h6>
                            <div class="alert alert-info" th:text="${message.adminNotes}">管理员备注</div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="card">
                    <div class="card-body">
                        <h5><i class="bi bi-gear"></i> 操作</h5>
                        <div class="btn-group" role="group">
                            <button class="btn btn-outline-success" 
                                    th:onclick="'updateStatus(' + ${message.id} + ', \'READ\')'">
                                <i class="bi bi-check"></i> 标记已读
                            </button>
                            <button class="btn btn-outline-warning" 
                                    th:onclick="'updateStatus(' + ${message.id} + ', \'REPLIED\')'">
                                <i class="bi bi-reply"></i> 标记已回复
                            </button>
                            <button class="btn btn-outline-danger" 
                                    th:onclick="'blockDevice(\'' + ${message.deviceFingerprint} + '\')'">
                                <i class="bi bi-shield-x"></i> 封禁设备
                            </button>
                            <a th:href="@{/admin/device/{deviceFingerprint}/messages(deviceFingerprint=${message.deviceFingerprint})}" 
                               class="btn btn-outline-info">
                                <i class="bi bi-list"></i> 查看该设备所有消息
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- 快速统计 -->
                <div class="card">
                    <div class="card-header">
                        <h5><i class="bi bi-graph-up"></i> 快速统计</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-2">
                            <span>消息ID:</span>
                            <strong th:text="${message.id}">#123</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>发送时间:</span>
                            <small th:text="${#temporals.format(message.createdAt, 'MM-dd HH:mm')}">时间</small>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>当前状态:</span>
                            <span class="badge bg-secondary" th:text="${message.status.name()}">状态</span>
                        </div>
                        <hr>
                        <div class="text-center">
                            <a th:href="@{/admin/device/{deviceFingerprint}/messages(deviceFingerprint=${message.deviceFingerprint})}" 
                               class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-list"></i> 该设备历史消息
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 安全信息 -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="bi bi-shield-check"></i> 安全信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-2">
                            <strong>IP地址:</strong><br>
                            <code th:text="${message.ipAddress}">IP</code>
                        </div>
                        <div class="mb-2">
                            <strong>设备指纹:</strong><br>
                            <code class="small" th:text="${message.deviceFingerprint}">指纹</code>
                        </div>
                        <div class="alert alert-warning small">
                            <i class="bi bi-exclamation-triangle"></i>
                            如果发现异常行为，可以封禁该设备
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 状态更新模态框 -->
    <div class="modal fade" id="statusModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">更新消息状态</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="statusForm">
                        <input type="hidden" id="messageId" name="id">
                        <div class="mb-3">
                            <label class="form-label">状态</label>
                            <select name="status" class="form-select" id="statusSelect">
                                <option value="PENDING">待处理</option>
                                <option value="READ">已查看</option>
                                <option value="REPLIED">已回复</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">管理员备注</label>
                            <textarea name="adminNotes" class="form-control" rows="3" 
                                      placeholder="添加备注信息（可选）"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submitStatusUpdate()">更新</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function updateStatus(messageId, status) {
            document.getElementById('messageId').value = messageId;
            document.getElementById('statusSelect').value = status;
            new bootstrap.Modal(document.getElementById('statusModal')).show();
        }

        function submitStatusUpdate() {
            const form = document.getElementById('statusForm');
            const formData = new FormData(form);
            
            fetch(`/admin/message/${formData.get('id')}/status`, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('更新失败: ' + data.message);
                }
            })
            .catch(error => {
                alert('更新失败: ' + error.message);
            });
        }

        function blockDevice(deviceFingerprint) {
            if (confirm('确定要封禁此设备24小时吗？')) {
                const formData = new FormData();
                formData.append('deviceFingerprint', deviceFingerprint);
                formData.append('hours', '24');
                
                fetch('/admin/device/block', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('设备已封禁');
                        location.reload();
                    } else {
                        alert('封禁失败: ' + data.message);
                    }
                })
                .catch(error => {
                    alert('封禁失败: ' + error.message);
                });
            }
        }
    </script>
</body>
</html>
